<template>
	<div ref="MapView" style="height:100%">
		<div class="control">
			<RadioGroup v-model="SenceMode" type="button">
				<Radio label="2D"></Radio>
				<Radio label="3D"></Radio>
			</RadioGroup>
		</div>
	</div>
</template>

<script>
	import simpleMap from '../../components/simpleMap';

	var map = null;
	var mapConfig = [{ "type": "TD", "name": "天地图", "layerType": "background", "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", "default": false }]
	const randomNum = (min, max) => parseFloat(Math.random() * (max - min + 1) + min, 10);

	export default {
		data() { return { SenceMode: '3D', } },
		watch: { SenceMode(val) { map.SenceMode = val; } },
		mounted() {
			map = simpleMap.initMap(this.$refs.MapView, {
				mapOptions: {
					animation: false, // 关闭默认动画事件
					senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
				},
			});
			map.addProviders(mapConfig);
			map.flytochina();
			const viewer = map.getViewer();

			const scene = viewer.scene;

			// var scene = viewer.scene;

			var material = new Cesium.Material({
				fabric: {
					uniforms: {
						u_itime: 10.0,
						u_trailpercent: 0.3,
						u_trailmovespeed: 5.0 / 50.0,
					}
				}
			});

			var _point = [{ longitude: 115.0, latitude: 37.0, height: 1000000 }, { longitude: 100, latitude: 38 }, { longitude: 100, latitude: 30 }];
			var Points = [];
			for (let i = 0; i < _point.length; i++) {
				const element = _point[i];
				Points.push(simpleMap.util.CreatePosition(element));
			};

			var primitive = new Cesium.Primitive({
				geometryInstances: new Cesium.GeometryInstance({
					geometry: new Cesium.PolylineGeometry({
						positions: Points,
						width: 2.0,
						vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
						colorsPerVertex: true,
						colors: [
							new Cesium.Color(0.1, 0.0, 0.0, 1.0),
							new Cesium.Color(0.7, 0.0, 0.0, 1.0),
							new Cesium.Color(1.0, 0.0, 0.0, 1.0)
						],
					}),
				}),
				appearance: new Cesium.PolylineColorAppearance({
					translucent: false,
					fragmentShaderSource: `precision highp float;
                    varying vec4 v_color;
                    void main(){
                        float r=v_color.r-u_itime_0*u_trailmovespeed_2;
                        float dist=smoothstep(0.0,u_trailpercent_1,mod(r,u_trailpercent_1));
                        gl_FragColor=mix(vec4(1.0,0.0,0.0,1.0),vec4(1.0),dist);
                    }`,
				}),
			});
			primitive.appearance.material = material;

			scene.primitives.add(primitive);
			scene.preRender.addEventListener(function (s, t) {
				let elaspTime = Cesium.JulianDate.now().secondsOfDay - t.secondsOfDay;
				primitive.appearance.material.uniforms.u_itime = elaspTime;
			});

		},
		methods: {
			rgba2Color(value) {
				const regex = /(?<=\().+?(?=\))/g;
				var _value = value.match(regex)[0].split(',');
				return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
			},
		}
	}
</script>

<style>
.layout {
	height: 100%;
	width: 100%;
}

.control {
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px 20px;
	color: #fff;
	z-index: 4;
}
</style>